<template>
  <div class="left-item">
    <div class="left-item-title">{{ item.title }}</div>
    <div class="left-item-num-box">
      <left-item-num v-for="(i, index) in dataNum" :key="index" :item="i" />
    </div>
    <div class="left-item-rate-box">
      <left-item-rate v-for="(i, index) in dataRate" :key="index" :item="i" />
    </div>
  </div>
</template>

<script>
import LeftItemNum from './LeftItemNum';
import LeftItemRate from './LeftItemRate';
export default {
  components: {
    LeftItemNum,
    LeftItemRate
  },
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    dataNum() {
      return this.item.dataNum || [];
    },
    dataRate() {
      return this.item.dataRate || [];
    }
  }
};
</script>

<style lang="scss" scoped>
.left-item{
  background-image: url('~@/assets/images/fullscreen/xmlx.png');
  background-size: 100% 100%;
  padding: 10px;
  font-size: 18px;
  .left-item-title{
    color: #1fd2ff;
    height: 10%;
  }
  .left-item-num-box{
    height: 30%;
    margin-top: 3%;
    display: flex;
    flex-wrap: wrap;
    .left-item-num{
      width: 50%;
      // height: 50%;
    }
  }
  .left-item-rate-box{
    height: 54%;
    width: 100%;
    .left-item-rate{
      height: 50%;
      width: 100%;
      padding: 10px;
    }
  }
}
</style>
